<template>
  <div class="searchsuggest">
    <p>搜索提示</p>
    <ul>
      <li v-for="item in suggestList" :key="item.id" @click="$emit('search',item.name)"><i class="icon"></i> <span>{{item.name}}</span></li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['keywords'],
  created(){
    this.getSuggest(this.keywords)
  },
  data(){
    return{
      suggestList:[],
      isSuccess:true,
    }
  },
  watch:{
    keywords(newValue){
      this.getSuggest(newValue)
    }
  },
  methods:{
    getSuggest(keyword){
      if(!this.isSuccess)return;
      this.isSuccess=false;
      this.$http.get('/search/suggest',{
        params:{
          keywords:keyword
        }
      }).then(d=>{
        let order=d.data.result.order;
        console.log(order)
        let result=[]
        if(order){

          for(let i=0;i<order.length;i++){
            result=result.concat(d.data.result[order[i]])
          }
        }
        // this.suggestList=d.data.result.songs;
        this.isSuccess=true
      this.suggestList=result
        // return result
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchsuggest{
  ul{
    li{
      display: flex;
      align-items: center;
  padding-left: 10px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      line-height: 3;
      i.icon{
       
        width: 15px;
      height: 15px;
      background-image: url();
      }
      span{
       flex: 1;
        padding-left: 7px;
      }

    }
  }
}
</style>